<template>
	<div>
		<div class="talk" align="center" v-for="(item,i) in proplist.comments" :key="item.id">
			<div class="head">
				<el-avatar class="img" :size="40" :src="`http://127.0.0.1/api/public/showimg/${item.img}`"></el-avatar>
				<p class="name">
					{{item.nickname}}
				</p>
			</div>
			<div class="content">{{item.content}}</div>
			<div class="no"></div>
			<!-- <div>{{filterTime(item.createTime)}}</div> -->
		</div>
		<div class="nothing" v-show="proplist.comments.length==0">
			还没有人评论过哦
		</div>
	</div>
</template>

<script>
	import MobileHome from '../../../view/mobile/MobileHome.vue'
	export default {
		name: 'SelectMessage',
		//proplist 负责接收一个由父组件传递过来的数据
		//prop接收到的所有数据基本不允许进行添加 删除修改的操作 仅限于直接渲染 过滤数据
		props: ['proplist'],
		computed: {
			filterTime() {
				return (t) => {
					let year = new Date(t).getFullYear();
					let date = new Date(t).gedivate();
					if (date < 10) {
						date = '0' + date;
					}
					return `${year}/${date}`;
				}
			}
		},
		methods: {
			del(id) {
				// 当子组件触发点击事件时候 同时触发父组件的del事件且将当前子组件的id作为参数传递给父组件的函数
				console.log(id);
				this.$emit('del', id);
			}
		},
		mounted() {
			console.log(this.proplist);
		}
	}
</script>

<style scoped>
	table {
		width: 95%;
		margin: 10px auto;
		border-color: #ececec;
	}

	input {
		width: 96%;
		line-height: 40px;
		margin: 10px 0;
		border-radius: 8px;
		border: 1px solid #ececec;
		outline: none;
		/* 清除输入框获取焦点的边框效果 */
		text-indent: 0.5em;
	}

	textarea {
		resize: none;
		/* 禁止文本框拉动 */
		width: 93%;
		margin: 15px 0;
		border-radius: 8px;
		border: 1px solid #ececec;
		outline: none;
		/* 清除输入框获取焦点的边框效果 */
		text-indent: 0.5em;
	}

	/* 找到表单内type属性为submit 的input标签 */
	input[type='sumit'] {
		width: 50%;
		background-color: #007bff;
		color: white;
	}

	input[type='checkbox'] {
		width: 25px;
		height: 15px;
		background-color: #007bff;
		color: white;
	}

	.talk {
		background-color: rgba(91, 95, 98, 0.4);
		margin: 10px;
	}

	.head {
		display: flex;
		text-align: left;

	}

	.img {
		margin: 20px;
	}

	.name {
		margin-top: 10px;
		margin-left: -10px;
	}

	.content {
		margin: 10px;
		margin-top: -8px;
		border-radius: 12px;
		border: #373b46 1px solid;
		background-color: rgba(121, 129, 153, 0.4);
	}
	.no{
		height: 5px;
	}
</style>